<template>
    <el-row style="margin-bottom: 20px;">
        <el-col :span="12" style="font-size: 18px; font-weight: bold;">我的地址</el-col>
        <el-col :span="12" style="text-align: right;"><el-button type="primary" @click="addDialogShow = true;">添加地址</el-button></el-col>
    </el-row>
    <div>
        <ul class="shippingList">
            <li v-for="(shipping, index) in shippingList" :key="index" :class="{defaultAddr: shipping.status == 1}">
                <div class="area">{{shipping.receiverProvince}} - {{shipping.receiverCity}} - {{shipping.receiverDistrict}} - {{shipping.receiverAddress}}</div>
                <div class="shippingess">{{shipping.receiverAddress}}</div>
                <div class="contect">{{shipping.receiverName}}</div>
                <div class="option">
                    <span v-if="shipping.status == 1" class="defaultInfo">默认地址</span>
                    <el-button size="small" v-else @click="setDefault(shipping.id)">设为默认</el-button>
                    <el-popconfirm title="你确定要删除该地址吗?" confirm-button-text="确认" cancel-button-text="取消"
                                   width="200px" @confirm="deleteAddr(shipping.id)">
                        <template #reference>
                            <el-button size="small">删除</el-button>
                        </template>
                    </el-popconfirm>

                </div>
            </li>
        </ul>
    </div>

    <!-- 添加地址对话框开始  -->
    <el-dialog v-model="addDialogShow" title="添加地址" width="800">
        <el-form>
            <el-form-item label="省/市/区县/街道" label-width="15%">
                <el-select v-model="shipping.receiverProvince" placeholder="请选择省" style="width: 150px; margin-right: 10px;" @change="selectProvince">
                    <el-option
                        v-for="(p, index) in pcas"
                        :key="index"
                        :value="p.name"/>
                </el-select>
                <el-select v-model="shipping.receiverCity" placeholder="请选择市" style="width: 150px; margin-right: 10px;" @change="selectCity">
                    <el-option
                        v-for="(c, index) in province.children"
                        :key="index"
                        :value="c.name"/>
                </el-select>
                <el-select v-model="shipping.receiverDistrict" placeholder="请选择区县" style="width: 150px; margin-right: 10px;" @change="selectDistrict">
                    <el-option
                        v-for="(d, index) in city.children"
                        :key="index"
                        :value="d.name"/>
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" label-width="15%">
                <el-input v-model="shipping.receiverAddress" placeholder="请输入详细地址" style="width: 400px;" />
            </el-form-item>
            <el-form-item label="联系人" label-width="15%">
                <el-input v-model="shipping.receiverName" placeholder="请输入联系人姓名" style="width: 400px;" />
            </el-form-item>
            <el-form-item label="电话" label-width="15%">
                <el-input v-model="shipping.receiverPhone" placeholder="请输入联系电话" style="width: 400px;" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insert">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加地址对话框结束  -->
</template>

<script setup>
import shippingApi from "@/api/shippingApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import pcas from "@/stores/pcas-code.json";

//当前用户的所有地址信息
const shippingList = ref([]);
//是否让添加的对话框显示
const addDialogShow = ref(false);
//保存新增和修改地址信息的对象
const shipping = ref({
    receiverProvince: '',
    receiverCity: '',
    receiverDistrict: '',
    receiverAddress: '',
    receiverName: '',
    receiverPhone: ''
});
//选中的省
const province = ref({});
//选中的市
const city = ref({});
//选中的区县
const district = ref({});

//设为默认
function setDefault(id) {
    let shipping = {
        id: id,
        status: 1
    }

    shippingApi.updateStatus(shipping).then(result => {
        ElMessage.success(result.msg);
        getAddrList();
    })
}

//省被选中之后调用
function selectProvince(value) {
    city.value = {};
    district.value = {};
    shipping.value.city = '';
    shipping.value.district = '';
    //province和被选中省的对象绑定
    pcas.forEach(p => {
        if(p.name == value) {
            province.value = p;
        }
    })
}

//市被选中之后调用
function selectCity(value) {
    district.value = {};
    shipping.value.district = '';
    //city和被选中市的对象绑定
    province.value.children.forEach(c => {
        if(c.name == value) {
            city.value = c;
        }
    })
}

//区县被选中之后调用
function selectDistrict(value) {
    shipping.value.street = '';
    //district和被选中区县的对象绑定
    city.value.children.forEach(d => {
        if(d.name == value) {
            district.value = d;
        }
    })
}

//获取当前用户的所有地址
function getAddrList() {
    shippingApi.selectByUserId().then(result => {
        shippingList.value = result.data;
    });
}

//重置信息
function resetInfo() {
    //保存新增和修改地址信息的对象
    shipping.value = {
        receiverProvince: '',
        receiverCity: '',
        receiverDistrict: '',
        receiverAddress: '',
        receiverName: '',
        receiverPhone: ''
    };
    //选中的省
    province.value = {};
    //选中的市
    city.value = {};
    //选中的区县
    district.value = {};
}

//添加
function insert() {
    shippingApi.insert(shipping.value).then(result => {
        ElMessage.success(result.msg);
        //重置信息
        resetInfo()
        //隐藏添加的对话框
        addDialogShow.value = false;
        //查询当前用户的所有地址
        getAddrList();

    })
}


//删除地址
function deleteAddr(id) {
    shippingApi.deleteById(id).then(result => {
        ElMessage.success(result.msg);
        //查询当前用户的所有地址
        getAddrList();
    });
}

getAddrList();
</script>

<style scoped>
    .shippingList li {
        margin: 0px 20px 20px 0px;
        padding: 20px;
        float: left;
        width: 280px;
        border: 1px solid #EEE;
        border-radius: 5px;
        background-color: #FFF;
    }

    .shippingList li:hover {
        box-shadow: 0px 0px 20px #000;
    }

    .shippingList li:nth-child(3n) {
        margin-right: 0px;
    }

    .shippingList li div {
        height: 30px;
        line-height: 30px;
    }

    .shippingList li .area {
        font-size: 18px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shippingList li .shippingess {
        font-size: 14px;
        color: #AAA;
    }

    .shippingList li .contect {
        color: var(--theme-color);
        font-weight: bold;
    }

    .shippingList li .phone {
        font-size: 14px;
    }

    .shippingList li .option {
        text-align: right;
    }

    .shippingList .defaultInfo {
        font-weight: bold;
        color: var(--theme-color);
        margin-right: 10px;
    }

    .shippingList .defaultAddr {
        border: 2px solid var(--theme-color);
    }

    .shippingList .defaultAddr:hover {
        box-shadow: 0px 0px 20px var(--theme-color);
    }
</style>